﻿@page "/"
@*
    The page directive indicates this component is available as a page 
    at the root of the app, the "/" route.
*@

@*
    Razor components can be nested. HeadingComponent is a component 
    supplied by the Razor file HeadingComponent.razor.
*@
<!-- <snippet_HeadingComponent> -->
<HeadingComponent />
<!-- </snippet_HeadingComponent> -->

<h2>Index.razor</h2>

<p>
    <code>HeadingComponent</code> (<em>HeadingComponent.razor</em>) 
    is embedded within this Index page component:
</p>
<pre><code>&lt;HeadingComponent /&gt;</code></pre>

<h2>HeadingComponent.razor</h2>

<pre><code>@@System.Globalization
@@*
    The 'using' directive makes System.Globalization available to
    the component.
*@@

@@*
    Heading text is rendered by evaluating the _headingText field.
    The font-style of the heading is rendered by evaluating the
    _headingFontStyle field.
*@@
&lt;h1 style="font-style:@@_headingFontStyle"&gt;@@_headingText&lt;/h1&gt;

&lt;form&gt;
    &lt;div&gt;
        @@*
            A check box sets the font style and is bound to the _italicsCheck field.
        *@@
        &lt;input type="checkbox" id="italicsCheck" @@bind="_italicsCheck" /&gt;
        &lt;label class="form-check-label" for="italicsCheck"&gt;Use italics&lt;/label&gt;
    &lt;/div&gt;

    @@*
        When the form is submitted, the onclick event executes
        the UpdateHeading method.
    *@@
    &lt;button type="button" class="btn btn-primary" @@onclick="UpdateHeading"&gt;
        Update heading
    &lt;/button&gt;
&lt;/form&gt;

@@code {
    private static TextInfo _tinfo = CultureInfo.CurrentCulture.TextInfo;
    private string _headingText = _tinfo.ToTitleCase("welcome to blazor!");
    private string _headingFontStyle = "normal";
    private bool _italicsCheck = false;

    // When UpdateHeading is executed, _italicsCheck determines
    // the value of _headingFontStyle to set the font style of the
    // heading.
    public void UpdateHeading()
    {
        _headingFontStyle = _italicsCheck ? "italic" : "normal";
    }
}</code></pre>
